<template>
  <div class="equipment-search">
    <el-form
      :model="searchForm"
      :inline="true"
      class="search-form"
      @submit.prevent="handleSearch"
    >
      <el-form-item label="设备编号">
        <el-input
          v-model="searchForm.equipCode"
          placeholder="请输入设备编号"
          clearable
          style="width: 200px"
          @keyup.enter="handleSearch"
        />
      </el-form-item>
      
      <el-form-item label="设备名称">
        <el-input
          v-model="searchForm.equipName"
          placeholder="请输入设备名称"
          clearable
          style="width: 200px"
          @keyup.enter="handleSearch"
        />
      </el-form-item>
      
      <el-form-item label="设备类型">
        <el-input
          v-model="searchForm.equipType"
          placeholder="请输入设备类型"
          clearable
          style="width: 200px"
          @keyup.enter="handleSearch"
        />
      </el-form-item>
      
      <el-form-item label="状态">
        <el-input
          v-model="searchForm.status"
          placeholder="请输入状态"
          clearable
          style="width: 200px"
          @keyup.enter="handleSearch"
        />
      </el-form-item>
      
      <el-form-item>
        <el-button
          type="primary"
          :icon="Search"
          @click="handleSearch"
          :loading="loading"
        >
          搜索
        </el-button>
        <el-button
          :icon="Refresh"
          @click="handleReset"
        >
          重置
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { reactive } from 'vue'
import { Search, Refresh } from '@element-plus/icons-vue'

export default {
  name: 'EquipmentSearchComponent',
  props: {
    loading: {
      type: Boolean,
      default: false
    }
  },
  emits: ['search', 'reset'],
  setup(props, { emit }) {
    const searchForm = reactive({
      equipCode: '',
      equipName: '',
      equipType: '',
      status: ''
    })

    const handleSearch = () => {
      // 过滤空值
      const searchParams = {}
      Object.keys(searchForm).forEach(key => {
        if (searchForm[key] !== '' && searchForm[key] !== null && searchForm[key] !== undefined) {
          searchParams[key] = searchForm[key]
        }
      })
      emit('search', searchParams)
    }

    const handleReset = () => {
      Object.keys(searchForm).forEach(key => {
        searchForm[key] = ''
      })
      emit('reset')
    }

    return {
      searchForm,
      handleSearch,
      handleReset,
      Search,
      Refresh
    }
  }
}
</script>

<style scoped>
.equipment-search {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid #e9ecef;
}

.search-form {
  margin: 0;
}

.search-form :deep(.el-form-item) {
  margin-bottom: 0;
  margin-right: 20px;
}

.search-form :deep(.el-form-item__label) {
  color: #714B67;
  font-weight: 600;
  font-size: 14px;
}

.search-form :deep(.el-input__inner) {
  border-color: #dcdfe6;
  color: #606266;
}

.search-form :deep(.el-input__inner:focus) {
  border-color: #017fa5;
  box-shadow: 0 0 0 2px rgba(1, 127, 165, 0.1);
}

.search-form :deep(.el-button--primary) {
  background-color: #017fa5;
  border-color: #017fa5;
  color: #ffffff;
}

.search-form :deep(.el-button--primary:hover) {
  background-color: #015f7a;
  border-color: #015f7a;
}

.search-form :deep(.el-button--primary:focus) {
  background-color: #017fa5;
  border-color: #017fa5;
}

.search-form :deep(.el-button) {
  color: #714B67;
  border-color: #dcdfe6;
  background-color: #ffffff;
}

.search-form :deep(.el-button:hover) {
  color: #017fa5;
  border-color: #017fa5;
  background-color: #f0f9ff;
}

.search-form :deep(.el-button:focus) {
  color: #714B67;
  border-color: #dcdfe6;
  background-color: #ffffff;
}
</style>
